<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="5">
        <div>
          <el-statistic group-separator="," :precision="2" :value="value1" :title="title1" style></el-statistic>
          <el-statistic :value="increase1" :precision="2"
                        :valueStyle="{color: increase1 > 0 ? 'red':'green',fontSize: '5px'}" style></el-statistic>
        </div>
      </el-col>

      <el-col :span="5">
        <div>
          <el-statistic group-separator="," :precision="2" :value="value2" :title="title2" style></el-statistic>
          <el-statistic :value="increase2" :precision="2"
                        :valueStyle="{color: increase2 > 0 ? 'red':'green',fontSize: '5px'}" style></el-statistic>
        </div>
      </el-col>

      <el-col :span="5">
        <div>
          <el-statistic group-separator="," :precision="2" :value="value3" :title="title3" style></el-statistic>
          <el-statistic :value="increase3" :precision="2"
                        :valueStyle="{color: increase3 > 0 ? 'red':'green',fontSize: '5px'}" style></el-statistic>
        </div>
      </el-col>

      <el-col :span="5">
        <div>
          <el-statistic group-separator="," :precision="2" :value="value4" :title="title4" style></el-statistic>
          <el-statistic :value="increase4" :precision="2"
                        :valueStyle="{color: increase4 > 0 ? 'red':'green',fontSize: '5px'}" style></el-statistic>
        </div>
      </el-col>

      <el-col :span="4">
        <div>
          <el-statistic group-separator="," :precision="2" :value="value5" :title="title5" style></el-statistic>
          <el-statistic :value="increase5" :precision="2"
                        :valueStyle="{color: increase5 > 0 ? 'red':'green',fontSize: '5px'}" style></el-statistic>
        </div>
      </el-col>
      <!--&lt;!&ndash;      添加一条竖线  &ndash;&gt;-->
      <!--      <el-col :span="1">-->
      <!--        <div>-->
      <!--          <el-divider direction="vertical"></el-divider>-->
      <!--        </div>-->
      <!--      </el-col>-->


      <!--      <el-col :span="6">-->
      <!--        <div>-->
      <!--          <el-statistic title="chuangye">-->
      <!--            <template slot="formatter"> 456/2 </template>-->
      <!--          </el-statistic>-->
      <!--        </div>-->
      <!--      </el-col>-->
      <!--      <el-col :span="6">-->
      <!--        <div>-->
      <!--          <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value3" :title="title2">-->
      <!--            <template slot="prefix">-->
      <!--              <i class="el-icon-s-flag" style="color: red"></i>-->
      <!--            </template>-->
      <!--            <template slot="suffix">-->
      <!--              <i class="el-icon-s-flag" style="color: blue"></i>-->
      <!--            </template>-->
      <!--          </el-statistic>-->
      <!--        </div>-->
      <!--      </el-col>-->
      <!--      <el-col :span="6">-->
      <!--        <div>-->
      <!--          <el-statistic :value="like ? 521 : 520" title="Feedback">-->
      <!--            <template slot="suffix">-->
      <!--              <span @click="like = !like" class="like">-->
      <!--                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>-->
      <!--                <i class="el-icon-star-off" v-show="!like"></i>-->
      <!--              </span>-->
      <!--            </template>-->
      <!--          </el-statistic>-->
      <!--        </div>-->
      <!--      </el-col>-->
    </el-row>


    <el-divider></el-divider>
    <!--    竖线分割    -->


    <!--    <div :class=''>-->

  </div>
  <!--  </div>-->


  <!--    投顾服务-->
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      like: true,
      title1: "1",
      value1: 0,
      increase1: 0,

      title2: "",
      value2: 0,
      increase2: 0,

      title3: "",
      value3: 0,
      increase3: 0,

      title4: "",
      value4: 0,
      increase4: 0,

      title5: "",
      value5: 0,
      increase5: 0,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      axios({
        method: "get",
        url: "http://localhost:5000/fund/get_index",
      }).then(res => {
            this.like = true;
            let data = res.data[0]
            console.log(data)
            this.title1 = data[0][0];
            //to integer

            this.value1 = parseFloat(data[0][1]);
            this.increase1 = parseFloat(data[0][2]);

            this.title2 = data[1][0];
            this.value2 = parseFloat(data[1][1]);
            this.increase2 = parseFloat(data[1][2]);

            this.title3 = data[2][0];
            this.value3 = parseFloat(data[2][1]);
            this.increase3 = parseFloat(data[2][2]);

            this.title4 = data[3][0];
            this.value4 = parseFloat(data[3][1]);
            this.increase4 = parseFloat(data[3][2]);

            this.title5 = data[4][0];
            this.value5 = parseFloat(data[4][1]);
            this.increase5 = parseFloat(data[4][2]);
          });
    },
  },
};
</script>
<style lang="scss">
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}

.percent {
  display: inline-block;
}
</style>